// loading
.loading {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: fadein(@bg-light, 10%);
    z-index: 10;
    position: absolute;
    .flexCenter();
    transition: 300ms;
    user-select: none;
}
.white-shade {
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: fadein(@bg-light, 10%);
    z-index: 10;
    position: absolute;
    transition: 300ms;
    user-select: none;
}
.loading-footer {
    right:0;
    bottom: -60px;
}
.circle {
    width: @space * 2;
    height: @space * 2;
    .radius();
    margin: 10px;
    float: left;
    background-color: @mainColor;
    transition: 300ms;
    &:hover {
        .radius(0);
    }
}

.circle-1 {
    animation: loading 2s infinite
}

.circle-2 {
    animation: loading 2s infinite;
    animation-delay: .15s
}

.circle-3 {
    animation: loading 2s infinite;
    animation-delay: .30s
}

.circle-4 {
    animation: loading 2s infinite;
    animation-delay: .45s
}

.circle-5 {
    animation: loading 2s infinite;
    animation-delay: .60s
}

@keyframes loading {
    0% {
        transform: translateY(0)
    }
    35% {
        transform: translateY(0);
        opacity: .3
    }
    50% {
        transform: translateY(-20px);
        opacity: .8
    }
    70% {
        transform: translateY(3px);
        opacity: .8
    }
    85% {
        transform: translateY(-3px)
    }
}

.fade-loader-enter {
    opacity: .5;
}

.fade-loader-enter-to {
    opacity: 1;
}

.fade-loader-leave-to {
    opacity: 0; // transform: scale(.6);
}